<template>
  <div class="vip-list">
    <div class="vip-top">
      <div class="cnt">
        <div class="head-img">
        <img :src="userInfo.avatarUrl" alt="">
      </div>
      <div class="vip-info">
        <div class="name">{{userInfo.name}}</div>
        <div class="information">
          <span>已开通{{vipInfo&&vipInfo.vipList.length || 0}}个城市</span>
          <span>余额：{{vipInfo.balance | priceFormart}}元</span>
        </div>
      </div>
      <router-link class="vip-market" v-show="vipInfo.expireTimestamp > +new Date()" tag="div" :to="{path:'/user/myMember/selectedDisk', query: {type: 'vip', vipCity: vipInfo.lastVipCity}}">VIP选盘 <img class="arrow" src="../../../assets/img/dynamics/arrow.png" /></router-link>
      </div>
    </div>
    <div class="open-title">已开通的城市</div>
    <div class="open-box">
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="vip-item scale-1px-bottom" v-for="(item,index) in vipList" :key="index">
          <div class="info">
            <b class="title">{{item.city}}</b>
            <p class="time" :class="{'disable': !item.valiable}">{{item.time}}<span v-if="!item.valiable">已</span>到期</p>
          </div>
          <div class="action">续费</div>
        </div>
      </van-list> -->
      <div class="vip-item" v-for="(item,index) in vipInfo.vipList" :key="index" :class="{'active': index < 2}">
        <div class="info">
          <b class="title">{{item.city}}</b>
          <!--  :class="{'disable': !item.vipValid}" -->
          <p class="time">{{item.expireTimestamp | formatDate}} <span v-if="!item.vipValid">已到期</span></p>
        </div>
        <div class="action" @click="renewVip(item)">立即续费</div>
      </div>
    </div>
    <div class="open-btn" @click="goOpenVip">开通更多城市</div>
  </div>
</template>

<script>
import marketService from 'SERVICE/marketService'
import { mapGetters } from 'vuex'
import Avatar from 'COMP/Avatar'
export default {
  components: {
    Avatar
  },
  data () {
    return {
      // loading: false,
      // finished: false,
      // current: 1,
      // pages: 0,
      // pageSize: 10,
      vipInfo: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'userArea'])
  },
  created () {
    this.getVipInfo()
  },
  methods: {
    // 跳转开通vip城市
    goOpenVip () {
      this.$router.push('/public/vip-market/?fromPage=myMember&category=0')
    },
    // 获取vip城市列表
    getVipInfo () {
      marketService.vipInfo().then(res => {
        this.vipInfo = res
      }).catch()
    },
    // vip续费
    renewVip (item) {
      this.$store.commit('USER_AREA', { vipSelectedCity: item.city })
      this.$router.push('/user/myMember')
    }
    // 加载数据
    // onLoad () {
    //   if (this.current > this.pages) {
    //     // 加载状态结束
    //     this.finished = true
    //     this.loading = false
    //   } else {
    //     this.getVipList()
    //   }
    // },
    // 获取todoList列表
    // getVipList () {
    //   userService.getVipList({}).then(result => {
    //     if (result) {
    //       this.pages = result.pages
    //       let todoList = result.vipList
    //       if (this.current === 1) {
    //         this.vipList = vipList
    //       } else {
    //         this.vipList.push(...vipList)
    //       }
    //       this.current += 1
    //     }
    //   }).catch()
    // },
  },
  filters: {
    // 格式化时间
    formatDate (val) {
      let date = ''
      if (val) {
        let time = new Date(+val)
        let m = time.getMonth() + 1
        let d = time.getDate()
        let y = time.getFullYear()
        m = m < 10 ? '0' + m : m
        d = d < 10 ? '0' + d :d
        date = `${y}/${m}/${d}`
      }
      return date
    }
  }
}
</script>

<style lang="less" scoped>
.vip-list{
  font-size: 12px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family:PingFangSC;
  .open-title{
    height:26px;
    font-size:18px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:26px;
    margin: 24px 16px 0;
  }
  .open-box{
    flex: 1;
    margin: 0 16px;
    .vip-item{
      height:100px;
      display: flex;
      align-items: center;
      background:linear-gradient(90deg,rgba(135,112,255,1) 0%,rgba(66,61,204,1) 100%);
      border-radius:10px;
      margin-top: 16px;
      color: #fff;
      &.active{
        background:linear-gradient(90deg,rgba(0,158,230,1) 0%,rgba(0,122,230,1) 100%);
      }
      .info{
        flex: 1;
        margin-left: 24px;
        .title{
          height:28px;
          font-size:20px;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:28px;
        }
        .time{
          height:17px;
          font-size:12px;
          font-weight:300;
          color:rgba(255,255,255,0.6);
          line-height:17px;
          margin-top: 4px;
          &.disable{
            color: #EA4D2E;
          }
        }
      }
      .action{
        width:80px;
        height:30px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 4px 0px rgba(0,116,213,0.62);
        border-radius:15px;
        margin: 0 16px;
        color:rgba(0,126,230,1);
        font-size: 12px;
        line-height: 30px;
        text-align: center;
      }
    }
  }
  .open-btn{
    height:60px;
    border-radius:10px;
    border:1px solid rgba(0,122,230,1);
    font-size:16px;
    font-weight:500;
    color:rgba(0,122,230,1);
    text-align: center;
    line-height: 60px;
    margin: 30px 16px;
  }
  .vip-top{
    height: 123px;
    background: url('../../../assets/img/myMember/person_card_bg@2x.png') repeat left top;
    font-family:'PingFangSC';
    padding: 30px 0;
    .cnt{
      display: flex;
      align-items: center;
    }
    .head-img{
      flex-basis: 60px;
      height: 60px;
      width: 60px;
      margin-left: 16px;
      img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .vip-info{
      flex: 1;
      margin-left: 16px;
      color: #fff;
      .name{
        height:26px;
        font-size:18px;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:26px;
      }
      .information{
        height:16px;
        font-size:12px;
        font-weight:400;
        color:rgba(156,165,181,1);
        line-height:16px;
        span{
          margin-right: 5px;
        }
      }
    }
    .vip-market{
      flex-basis: 80px;
      width: 80px;
      height:30px;
      border-radius:15px;
      border:1px solid rgba(255,255,255,0.62);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 16px;
      img{
        width: 12px;
        height: 12px;
      }
    }
  }
}
</style>
